<template>
  <div ref="info" class="box-card">
    <i class="el-icon-close closeRight" @click.stop="clearJumpId" />
    <div class="head-box-card padding20 clearfix">
      <el-row v-if="showInfo" class="top_cus_info">
        <el-col :span="18">
          <el-col :span="8">
            <p>直播标题</p>
            <p>{{ initData.tittle }}</p>
          </el-col>
          <el-col :span="8">
            <p>直播时长</p>
            <p>{{ initData.duration }}</p>
          </el-col>
          <el-col :span="8">
            <p>直播类型</p>
            <p>{{ getLiveType(initData.liveType) }}</p>
          </el-col>
        </el-col>
        <el-col :span="6">
          <el-button v-if="accreditChildren.editorLive" type="primary" @click="jumpId">编 辑</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="height3" />
    <div v-if="showInfo" class="padding20">
      <el-tabs v-model="activeName">
        <el-tab-pane label="直播详情" name="first">
          <div class="infoBox">
            <el-col :span="12">直播标题：{{ initData.tittle }}</el-col>
            <el-col :span="12">直播时长：{{ getformatTimer(initData.duration) }}</el-col>
            <el-col :span="12">直播类型：{{ getLiveType(initData.liveType) }}</el-col>
            <el-col :span="12">直播标识：{{ getIdentification(initData.identification) }}</el-col>
            <el-col :span="12">直播顾问：{{ initData.memberId ? getMemberId(initData.memberId) :'' }}</el-col>
            <el-col :span="24">
              直播标签：
              <el-tag
                v-for="tag in initData.label ? JSON.parse(initData.label) :[]"
                :key="tag.id"
                :style="{color:'#'+tag.color}"
                :disable-transitions="false"
                @click="pushArr(tag)"
              >{{ tag.label }}</el-tag>
            </el-col>
            <el-col :span="24">是否上架：{{ initData.status ? "已上架" :'暂未上架' }}</el-col>
            <el-col :span="12">
              WEB封面：
              <img :src="WEB_LIVE_COVER" alt="WEB封面" >
            </el-col>
            <el-col :span="12">
              APP封面：
              <img :src="APP_LIVE_COVER" alt="APP封面" >
            </el-col>
          </div>
        </el-tab-pane>
        <el-tab-pane label="直播记录" name="second">
          <el-col :span="24">
            <liveRecord :id="$props.id" :accredit-children="accreditChildren" />
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="直播问题" name="third">
          <el-form label-width="100px">
            <el-form-item label="直播问题：">
              <div>
                <div v-for="(item,index) in questionArr" :key="index">
                  <li v-if="item.status" style="cursor:pointer">
                    <span @click="handleChangeList(item)">{{ item.content }}</span>
                    <span class="right">
                      <i class="el-icon-delete hoverDeleteIcon" @click="deleteQuestion(item)" />
                    </span>
                  </li>
                  <el-input
                    v-else
                    ref="saveTagInput"
                    v-model="item.content"
                    autofocus="true"
                    class="input-new-tag"
                    style="width:180px;"
                    maxlength="80"
                    @focus="handleChangeList(item)"
                    @keyup.enter.native="handleInputListConfirm"
                    @blur="handleInputListConfirm"
                  />
                </div>
              </div>
              <el-input
                v-if="inputVisible"
                ref="saveTagInput"
                v-model="inputValue"
                class="input-new-tag"
                style="width:180px;"
                maxlength="80"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              />
              <span v-else>
                <el-button
                  v-if="accreditChildren.setLiveQuestion"
                  class="button-new-tag"
                  @click="showInput"
                >+ 添加问题</el-button>
              </span>
              <el-button v-if="accreditChildren.setLiveQuestion" @click="handleSubmitQuestion">立即创建</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- <el-row v-loading="loading" class="padding20"></el-row> -->
  </div>
</template>
<script>
import mmUrl from '~/utils/utilUrl';
import {
  createDics,
  randomRangeId,
  trueOrFalse,
    _getformatTimer
} from '~/utils/util';
import liveRecord from '~/components/live/liveRecord';
export default {
  components: {
    liveRecord
  },
  props: ['id', 'pageHeight', 'updateRight', 'accreditChildren'],
  data() {
    return {
      questionArr: [],
      initData: {},
      showInfo: false,
      loading: true,
      activeName: 'first',
      resultDics: {},
      inputVisible: false,
      deleteArr: [],
      members: [],
      editorLive: {},
      inputValue: '',
      projects: [],
      APP_LIVE_COVER: '',
      WEB_LIVE_COVER: '',
      liveType: [
        {
          label: '公开课',
          value: 0
        },
        {
          label: '非公开课',
          value: 1
        }
      ],
      identification: [
        {
          label: '预告',
          value: 0
        },
        {
          label: '正在直播',
          value: 1
        },
        {
          label: '回放',
          value: 2
        }
      ]
    }
  },
  watch: {
    id(newd) {
      this.getInitData();
      this.activeName === "third" ? this.changeLiveQuestion(newd) : "";
    },
    updateRight() {
      this.getInitData()
    },
    activeName(newd) {
      switch (newd) {
        case 'third':
          this.changeLiveQuestion(this.$props.id)
          break;
      }
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    getformatTimer(timer) {
      return _getformatTimer(timer);
    },
    getFilesPhoto(res) {
      this.$post({
        url: mmUrl.file.getfiles,
        data: {
          dataId: this.$props.id,
          typeCode: res
        }
      }).then(result => {
        if (result.length) {
          if (res === 'IMAGE_APP_LIVE_COVER') {
            this.$set(this.$data, 'APP_LIVE_COVER', result[0].fileUrl)
            return;
          }
          this.$set(this.$data, 'WEB_LIVE_COVER', result[0].fileUrl)
        } else {
          if (res === 'IMAGE_APP_LIVE_COVER') {
            this.$set(this.$data, 'APP_LIVE_COVER', '')
            return;
          }
          this.$set(this.$data, 'WEB_LIVE_COVER', '')
        }
      })
    },
    handleSubmitQuestion() {
      this.$post({
        url: mmUrl.live.editor,
        data: {
          item: {
            id: this.$props.id,
            memberId: this.questionNeedMemberId
          },
          questionList: this.questionArr
        }
      }).then(() => {
        if (this.deleteArr.length) {
          this.$post({
            url: mmUrl.question.delete,
            data: {
              ids: this.deleteArr
            }
          }).then(() => {
            this.deleteArr = []
          })
        }
        this.showLiveQuestion = false
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
    },
    changeLiveQuestion(res) {
      this.$post({
        url: mmUrl.live.loadEdit,
        data: {
          id: res
        }
      }).then(res1 => {
        this.editorLive = res1.item
        this.editorLive.dataId = res1.item.id
        res1.questions.forEach(v => {
          v.status = true
        })
        this.questionArr = res1.questions
      })
    },
    deleteQuestion(res) {
      trueOrFalse(this).then(() => {
        if (res.id) {
          this.deleteArr.push(res.id)
        }
        this.questionArr.forEach((v, index) => {
          if (v.id) {
            if (v.id === res.id) {
              this.questionArr.splice(index, 1)
            }
          } else if (v.jsId) {
            if (v.jsId === res.jsId) {
              this.questionArr.splice(index, 1)
            }
          }
        })
      })
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputListConfirm() {
      this.questionArr.forEach(v => {
        if (v.id === this.questionArrIndex) {
          v.status = true
        }
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.questionArr.push({
          content: inputValue,
          dataType: 1,
          status: true,
          dataId: this.liveId,
          jsId: randomRangeId(30)
        })
      }
      this.inputVisible = false
      this.inputValue = '';
    },
    handleChangeList(res) {
      res.status = false
      this.questionArrIndex = res.id
    },
    getIdentification(res) {
      return this.identification.some(v => v.value === res)
        ? this.identification.filter(v => v.value === res)[0].label
        : '';
    },
    getMemberId(res) {
      return res
        .split(',')
        .map(z => {
          return this.members.some(v => v.id === z)
            ? this.members.filter(v => v.id === z)[0].nickName
            : '';
        })
        .join(',')
    },
    getLiveType(res) {
      return this.liveType.some(v => v.value === res)
        ? this.liveType.filter(v => v.value === res)[0].label
        : '';
    },
    clearJumpId() {
      this.$emit('clearJumpId')
    },
    jumpId() {
      this.$emit('editor')
    },
    getInitData() {
      this.$post({
        url: mmUrl.live.loadEdit,
        data: {
          id: this.$props.id
        }
      }).then(res => {
        this.initData = res.item
        this.members = res.members
        this.projects = res.projects
        this.resultDics = createDics(res.dics, 'dicCode')
        this.loading = false
        this.showInfo = true
        this.getFilesPhoto('IMAGE_APP_LIVE_COVER')
        this.getFilesPhoto('IMAGE_WEB_LIVE_COVER')
        this.$nextTick(() => {
          this.$refs['info'].style.height = this.$props.pageHeight + 'px';
        })
      })
    },
    getFilePhtot(res) {
      this.$post({
        url: mmUrl.file.getfiles,
        data: {
          dataId: this.$props.id,
          typeCode: res
        }
      }).then(res => {
        return res.length ? res[0].fileUrl : '';
      })
    }
  }
}
</script>

<style lang='scss'>
.infoBox {
  font-weight: 500;
  font-size: 14px;
  div {
    min-height: 50px;
  }
}
img {
  vertical-align: top;
  max-width: 480;
  max-height: 360px;
}
</style>
